<template>
  <view class="container">
    <!-- 搜索栏 -->
    <view class="search-bar">
      <u-search
        v-model="searchKeyword"
        placeholder="搜索菜品名称"
        :show-action="false"
        @search="handleSearch"
        @clear="handleClear"
      />
    </view>

    <!-- 分类标签 -->
    <view class="category-tabs">
      <scroll-view scroll-x class="tabs-scroll">
        <view class="tabs-container">
          <view
            v-for="category in categories"
            :key="category.id"
            class="tab-item"
            :class="{ active: currentCategory === category.id }"
            @tap="changeCategory(category.id)"
          >
            {{ category.name }}
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 菜品列表 -->
    <view class="dish-grid">
      <view
        v-for="dish in filteredDishes"
        :key="dish.id"
        class="dish-item"
        @tap="goToDishDetail(dish.id)"
      >
        <image class="dish-image" :src="dish.image" mode="aspectFill" />
        <view class="dish-info">
          <text class="dish-name">{{ dish.name }}</text>
          <text class="dish-desc">{{ dish.description }}</text>
          <view class="dish-footer">
            <view class="points">
              <text class="points-value">{{ dish.points }}</text>
              <u-icon name="heart-fill" color="#ff6b81" size="14" />
            </view>
            <view class="cart-btn" @tap.stop="addToCart(dish)">
              <u-icon name="shopping-cart" color="#fff" size="20" />
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 加载更多 -->
    <view v-if="loading" class="loading-more">
      <u-loading-icon text="加载中..." />
    </view>

    <!-- 空状态 -->
    <view v-if="!loading && filteredDishes.length === 0" class="empty-state">
      <u-empty
        mode="search"
        text="暂无相关菜品"
        icon="http://cdn.uviewui.com/uview/empty/search.png"
      />
    </view>
    
    <!-- 添加菜品按钮 -->
    <view class="add-dish-btn" @tap="goToAddDish">
      <u-icon name="plus" color="#fff" size="24" />
      <text>添加菜品</text>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useDishStore } from '@/store/modules/dish'
import { useCartStore } from '@/store/modules/cart'

const dishStore = useDishStore()
const cartStore = useCartStore()

// 数据
const searchKeyword = ref('')
const loading = ref(false)

// 计算属性
const categories = computed(() => dishStore.categories)
const currentCategory = computed(() => dishStore.currentCategory)
const dishes = computed(() => dishStore.dishes)

const filteredDishes = computed(() => {
  let result = dishes.value

  // 按分类筛选
  if (currentCategory.value !== 'all') {
    result = result.filter(dish => dish.category === currentCategory.value)
  }

  // 按关键词搜索
  if (searchKeyword.value.trim()) {
    result = result.filter(dish =>
      dish.name.toLowerCase().includes(searchKeyword.value.toLowerCase()) ||
      dish.description.toLowerCase().includes(searchKeyword.value.toLowerCase())
    )
  }

  return result
})

// 方法
const changeCategory = (categoryId) => {
  dishStore.setCurrentCategory(categoryId)
}

const handleSearch = () => {
  dishStore.setSearchKeyword(searchKeyword.value)
}

const handleClear = () => {
  searchKeyword.value = ''
  dishStore.setSearchKeyword('')
}

const goToDishDetail = (dishId) => {
  uni.navigateTo({
    url: `/pages/menu/detail?id=${dishId}`
  })
}

const goToAddDish = () => {
  uni.navigateTo({
    url: '/pages/menu/add'
  })
}

const addToCart = (dish) => {
  cartStore.addToCart({
    id: dish.id,
    name: dish.name,
    image: dish.image,
    points: dish.points,
    quantity: 1
  })
  
  uni.showToast({
    title: '已添加到购物车',
    icon: 'success'
  })
}

onMounted(() => {
  dishStore.getDishes()
})
</script>

<style lang="scss" scoped>
.container {
  padding: 20rpx;
  background: #f5f5f5;
  min-height: 1334rpx;
}

.search-bar {
  margin-bottom: 20rpx;
}

.category-tabs {
  margin-bottom: 20rpx;
  
  .tabs-scroll {
    white-space: nowrap;
    
    .tabs-container {
      display: inline-flex;
      padding: 0 10rpx;
      
      .tab-item {
        padding: 15rpx 30rpx;
        margin-right: 20rpx;
        background: #fff;
        border-radius: 30rpx;
        font-size: 26rpx;
        color: #666;
        border: 1rpx solid #e0e0e0;
        
        &.active {
          background: #ff6b81;
          color: #fff;
          border-color: #ff6b81;
}
      }
    }
  }
}

.dish-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin-right: 20rpx;
  
  .dish-item {
    background: #fff;
    border-radius: 20rpx;
    overflow: hidden;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
    
    .dish-image {
      width: 100%;
      height: 200rpx;
}
    
    .dish-info {
      padding: 20rpx;
      
      .dish-name {
        font-size: 28rpx;
        font-weight: bold;
        color: #333;
        display: block;
        margin-bottom: 8rpx;
}
      
      .dish-desc {
        font-size: 24rpx;
        color: #666;
        display: block;
        margin-bottom: 15rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
}
      
      .dish-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        .points {
          display: flex;
          align-items: center;
          
          .points-value {
            font-size: 28rpx;
            font-weight: bold;
            color: #ff6b81;
            margin-right: 4rpx;
}
        }
        
        .cart-btn {
          width: 50rpx;
          height: 50rpx;
          background: #ff6b81;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
}
      }
    }
  }
}

.loading-more {
  padding: 30rpx;
  text-align: center;
}

.empty-state {
  padding: 100rpx 0;
}

.add-dish-btn {
  position: fixed;
  right: 40rpx;
  bottom: 120rpx;
  width: 120rpx;
  height: 120rpx;
  background: #ff6b81;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rpx 12rpx rgba(255, 107, 129, 0.4);
  z-index: 100;
  
  text {
    font-size: 20rpx;
    color: #fff;
    margin-top: 4rpx;
  }
}
</style>